<template>
    <a-card>
        <a-row>
            <a-col :span="6">
                <a-input placeholder="添加职位" v-model="pos.name"></a-input>
            </a-col>
            <a-col :span="2">
                <a-button type="primary" @click="addPos">添加</a-button>
            </a-col>
        </a-row>
    </a-card>
    <a-card>
        <a-table ref="table" :columns="table.columns" :data="table.data" :loading="table.loading"
                 :row-selection="table.rowSelection" @select="handleSelectRow" @select-all="handleSelectAllRow">
            <template #optional="{ record }">
                <a-row :gutter="8">
                    <a-col :span="6">
                        <a-button type="primary" @click="handleOpenEdit(record)">修改</a-button>
                    </a-col>
                    <a-col :span="6">
                        <a-button type="primary" status="danger" @click="handleDelete(record)">删除</a-button>
                    </a-col>
                </a-row>
            </template>
        </a-table>
        <a-row>
            <a-col :span="4">
                <a-button @click="handleOpenDeleteWarnModal" type="primary" status="danger"
                          :disabled="table.moreDeleteBtnDisabled">
                    批量删除
                </a-button>
            </a-col>
        </a-row>
    </a-card>
    <a-modal :visible="editModal.open" :title="editModal.title" @ok="handleEdit" @cancel="handleCancelEdit" width="50%">
        <a-row>
            <a-col :span="4">
                <a-input placeholder="职位名称" v-model="editModal.data.name"></a-input>
            </a-col>
        </a-row>
    </a-modal>
    <a-modal :visible="deleteWarnModal.open" @ok="handleDeleteOk" @cancel="handleDeleteCancel"
             :ok-button-props="{status:'danger'}">
        <template #title>
            删除职位信息
        </template>
        <div>你确定要删除 <span style="color: #f33;">{{deleteWarnModal.data.name}}</span> 吗?</div>
    </a-modal>
</template>

<script>
    export default {
        name: "",
        data() {
            return {
                pos: {
                    name: ''
                },
                table: {
                    loading: false,
                    rowSelection: {
                        type: 'checkbox',
                        showCheckedAll: true
                    },
                    columns: [
                        {
                            title: '编号',
                            dataIndex: 'id',
                        },
                        {
                            title: '职位',
                            dataIndex: 'name',
                        },
                        {
                            title: '创建时间',
                            dataIndex: 'createDate',
                        },
                        {
                            title: '是否启用',
                            dataIndex: 'enabled',
                        },
                        {
                            title: '操作',
                            slotName: 'optional'
                        }
                    ],
                    data: [],
                    moreDeleteBtnDisabled: true
                },
                deleteWarnModal: {
                    open: false,
                    data: {},
                    rowKeys: []
                },
                editModal: {
                    open: false,
                    title: '修改职位信息',
                    data: {}
                }
            }
        },
        methods: {
            addPos() {
                if (this.pos.name === '') {
                    this.$message.error('名称不能为空')
                    return
                }
                this.$post(this.requestUrl.addPos.url, this.pos).then(res => {
                    this.pos.name = ''
                    this.$message.success(res.message)
                    this.getAllPositions()
                })
            },
            getAllPositions() {
                this.table.loading = true
                this.$get(this.requestUrl.getAllPositions.url).then(res => {
                    this.table.data = res.obj
                    this.table.loading = false
                })
            },
            handleOpenEdit(row) {
                this.editModal.data = row
                this.editModal.open = true
            },
            handleEdit() {
                this.editModal.data.createDate = ''
                this.$put(this.requestUrl.editPos.url, this.editModal.data).then(res => {
                    if (res) {
                        this.$message.success(res.message)
                        this.getAllPositions()
                    }
                    this.editModal.open = false
                })
            },
            handleCancelEdit() {
                this.editModal.open = false
            },
            handleDelete(row) {
                this.deleteWarnModal.data = row
                this.deleteWarnModal.open = true
            },
            handleDeleteOk() {
                if (this.deleteWarnModal.data.name instanceof Array) {
                    //批量删除
                    //[1,2,3]数组加上''会变成1,2,3
                    let params = this.deleteWarnModal.rowKeys + ''
                    this.$delete(this.requestUrl.delPos.url + '?ids=' + params).then(res => {
                        if (res) {
                            //初始化要删除的数组,不初始化新数据会带着旧数据
                            this.deleteWarnModal.rowKeys = []
                            this.$message.success(res.message)
                            this.getAllPositions()
                        }
                    })
                } else {
                    //单个删除
                    this.$delete(this.requestUrl.delPos.url + this.deleteWarnModal.data.id).then(res => {
                        if (res) {
                            this.$message.success(res.message)
                            this.getAllPositions()
                        }
                    })
                }
                this.deleteWarnModal.open = false
            },
            handleDeleteCancel() {
                this.deleteWarnModal.data = {}
                this.deleteWarnModal.open = false
            },
            handleSelectRow(rowKeys) {
                if (rowKeys.length > 0) {
                    this.table.moreDeleteBtnDisabled = false
                } else {
                    this.table.moreDeleteBtnDisabled = true
                }
                this.deleteWarnModal.rowKeys = rowKeys
            },
            handleSelectAllRow(bool) {
                let rowKeys = []
                if (bool) {
                    for (let row of this.table.data) {
                        rowKeys.push(row.key)
                    }
                    this.table.moreDeleteBtnDisabled = false
                } else {
                    rowKeys = []
                    this.table.moreDeleteBtnDisabled = true
                }
                this.deleteWarnModal.rowKeys = rowKeys
            },
            handleOpenDeleteWarnModal() {
                let name = []
                for (let row of this.table.data) {
                    for (let key of this.deleteWarnModal.rowKeys) {
                        if (row.key === key) {
                            name.push(row.name)
                            break
                        }
                    }
                }
                this.deleteWarnModal.data.name = name
                this.deleteWarnModal.open = true
            }
        },
        mounted() {
            this.getAllPositions()
        },
        created() {
        }
    }
</script>

<style scoped>

</style>
